<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双缝干涉实验 - 交互式演示</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <style>
        body {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1, h3 {
            color: #2c3e50;
            text-align: center;
        }
        .slider-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: 20px 0;
        }
        .slider-item {
            flex: 0 0 48%;
            margin-bottom: 15px;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 5px;
        }
        .slider-label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .graph-container {
            margin: 20px 0;
        }
        .info-box {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            margin: 20px 0;
        }
        .formula-box {
            background-color: #e8f4fd;
            border: 1px solid #b3d9ff;
            border-radius: 5px;
            padding: 15px;
            margin: 20px 0;
        }
        .fringe-info {
            font-size: 18px;
            font-weight: bold;
            margin: 10px 0;
            text-align: center;
        }
        .theory-explanation {
            font-size: 14px;
            text-align: left;
            margin: 10px 0;
        }
        @media (max-width: 768px) {
            .slider-item {
                flex: 0 0 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>双缝干涉实验 - 交互式演示</h1>

        <div class="slider-container">
            <div class="slider-item">
                <label class="slider-label" for="slit-separation-slider">双缝间距 d (mm):</label>
                <input type="range" id="slit-separation-slider" min="0.1" max="2.0" value="0.5" step="0.05" class="slider">
                <span id="slit-separation-value">0.5 mm</span>
            </div>

            <div class="slider-item">
                <label class="slider-label" for="screen-distance-slider">缝屏距离 L (m):</label>
                <input type="range" id="screen-distance-slider" min="0.5" max="3.0" value="1.5" step="0.1" class="slider">
                <span id="screen-distance-value">1.5 m</span>
            </div>

            <div class="slider-item">
                <label class="slider-label" for="wavelength-slider">光波长 λ (nm):</label>
                <input type="range" id="wavelength-slider" min="400" max="700" value="532" step="10" class="slider">
                <span id="wavelength-value">532 nm</span>
            </div>

            <div class="slider-item">
                <label class="slider-label" for="coherence-slider">光源单色性:</label>
                <input type="range" id="coherence-slider" min="0.1" max="1.0" value="0.9" step="0.1" class="slider">
                <span id="coherence-value">良好</span>
            </div>

            <div class="slider-item">
                <label class="slider-label" for="vibration-slider">环境振动:</label>
                <input type="range" id="vibration-slider" min="0" max="1.0" value="0.1" step="0.1" class="slider">
                <span id="vibration-value">轻微</span>
            </div>

            <div class="slider-item">
                <label class="slider-label" for="slit-width-slider">缝宽 (μm):</label>
                <input type="range" id="slit-width-slider" min="10" max="200" value="50" step="10" class="slider">
                <span id="slit-width-value">50 μm</span>
            </div>
        </div>

        <div class="graph-container">
            <div id="interference-pattern"></div>
        </div>

        <div class="graph-container">
            <div id="intensity-profile"></div>
        </div>

        <div class="info-box">
            <div id="fringe-spacing-display" class="fringe-info">条纹间距: 1.596 mm</div>
            <div id="theory-explanation" class="theory-explanation">
                条纹间距理论值: 1.596 mm<br>
                影响因素分析:<br>
                - 光源相干性: 良好<br>
                - 环境振动: 轻微<br>
                - 实际应用: 半导体光刻技术利用类似原理实现纳米级图案化
            </div>
        </div>

        <div class="formula-box">
            <h3>理论公式推导</h3>
            <p>双缝干涉条纹间距公式: Δx = λL/d</p>
            <p>其中:</p>
            <ul>
                <li>Δx: 相邻明纹或暗纹间距</li>
                <li>λ: 光波长</li>
                <li>L: 缝屏距离</li>
                <li>d: 双缝间距</li>
            </ul>
        </div>
    </div>

    <script>
        // 初始化图表
        function initializeCharts() {
            updateInterference();
        }

        // 更新干涉图样和光强分布
        function updateInterference() {
            // 获取滑块值
            const d = parseFloat(document.getElementById('slit-separation-slider').value);
            const L = parseFloat(document.getElementById('screen-distance-slider').value);
            const wavelength = parseFloat(document.getElementById('wavelength-slider').value);
            const coherence = parseFloat(document.getElementById('coherence-slider').value);
            const vibration = parseFloat(document.getElementById('vibration-slider').value);
            const slitWidth = parseFloat(document.getElementById('slit-width-slider').value);

            // 单位转换
            const d_m = d * 1e-3;  // 毫米转米
            const L_m = L;  // 米
            const lambda_m = wavelength * 1e-9;  // 纳米转米
            const a_m = slitWidth * 1e-6;  // 微米转米

            // 计算条纹间距
            const fringeSpacing = (lambda_m * L_m) / d_m;  // 米
            const fringeSpacingMm = fringeSpacing * 1000;  // 毫米

            // 创建屏幕坐标
            const x = [];
            for (let i = -50; i <= 50; i += 0.1) {
                x.push(i);
            }
            const x_m = x.map(val => val * 1e-3);  // 毫米转米

            // 计算光强分布
            const intensity = calculateIntensity(x_m, d_m, L_m, lambda_m, a_m, coherence, vibration);

            // 更新干涉图样
            updateInterferencePattern(x, intensity);

            // 更新光强分布图
            updateIntensityProfile(x, intensity);

            // 更新显示信息
            updateDisplayInfo(fringeSpacingMm, coherence, vibration);
        }

        // 计算光强分布
        function calculateIntensity(x_m, d_m, L_m, lambda_m, a_m, coherence, vibration) {
            const intensity = [];

            for (let i = 0; i < x_m.length; i++) {
                const beta = (Math.PI * a_m / (lambda_m * L_m)) * x_m[i];
                const alpha = (Math.PI * d_m / (lambda_m * L_m)) * x_m[i];

                // 避免除以零
                const betaSafe = beta === 0 ? 1e-10 : beta;

                // 单缝衍射包络
                const singleSlit = Math.pow(Math.sin(betaSafe) / betaSafe, 2);

                // 双缝干涉
                const doubleSlit = Math.pow(Math.cos(alpha), 2);

                // 总强度
                let intensityVal = singleSlit * doubleSlit;

                // 考虑光源单色性和环境振动的影响
                const coherenceFactor = coherence;
                const vibrationFactor = 1 - vibration * 0.5;

                // 添加噪声模拟实际条件
                const noiseLevel = (1 - coherence) * 0.1 + vibration * 0.2;
                intensityVal = intensityVal * coherenceFactor * vibrationFactor;
                intensityVal += (Math.random() - 0.5) * noiseLevel * 2;
                intensityVal = Math.max(0, Math.min(1, intensityVal));

                intensity.push(intensityVal);
            }

            return intensity;
        }

        // 更新干涉图样
        function updateInterferencePattern(x, intensity) {
            // 生成二维干涉图样
            const y = [];
            for (let i = -20; i <= 20; i += 0.2) {
                y.push(i);
            }

            const intensity2d = [];
            for (let i = 0; i < y.length; i++) {
                intensity2d.push(intensity);
            }

            const data = [{
                z: intensity2d,
                x: x,
                y: y,
                type: 'heatmap',
                colorscale: 'Gray',
                showscale: false
            }];

            const layout = {
                title: "双缝干涉条纹图样",
                xaxis: { title: "屏幕位置 (mm)" },
                yaxis: { title: "" },
                height: 300,
                margin: { l: 50, r: 50, t: 50, b: 50 }
            };

            Plotly.newPlot('interference-pattern', data, layout, { responsive: true });
        }

        // 更新光强分布图
        function updateIntensityProfile(x, intensity) {
            // 标记明纹位置
            const maxPositions = [];
            for (let i = 1; i < intensity.length - 1; i++) {
                if (intensity[i] > intensity[i-1] && intensity[i] > intensity[i+1] && intensity[i] > 0.3) {
                    maxPositions.push(x[i]);
                }
            }

            const data = [{
                x: x,
                y: intensity,
                type: 'scatter',
                mode: 'lines',
                line: { color: 'blue', width: 2 },
                name: '光强分布'
            }];

            // 添加明纹标记
            const maxTraces = [];
            for (let i = 0; i < Math.min(maxPositions.length, 5); i++) {
                const pos = maxPositions[i];
                const idx = x.findIndex(val => Math.abs(val - pos) < 0.05);

                maxTraces.push({
                    x: [pos],
                    y: [intensity[idx]],
                    type: 'scatter',
                    mode: 'markers+text',
                    marker: { size: 10, color: 'red' },
                    text: [`明纹${i+1}`],
                    textposition: 'top center',
                    showlegend: false
                });
            }

            const allData = data.concat(maxTraces);

            const layout = {
                title: "光强分布曲线",
                xaxis: { title: "屏幕位置 (mm)" },
                yaxis: { title: "相对光强" },
                height: 300,
                margin: { l: 50, r: 50, t: 50, b: 50 }
            };

            Plotly.newPlot('intensity-profile', allData, layout, { responsive: true });
        }

        // 更新显示信息
        function updateDisplayInfo(fringeSpacingMm, coherence, vibration) {
            // 更新条纹间距显示
            document.getElementById('fringe-spacing-display').textContent =
                `条纹间距: ${fringeSpacingMm.toFixed(3)} mm`;

            // 更新理论解释
            const coherenceText = coherence > 0.8 ? '良好' : coherence > 0.5 ? '一般' : '较差';
            const vibrationText = vibration < 0.3 ? '轻微' : vibration < 0.7 ? '中等' : '严重';

            document.getElementById('theory-explanation').innerHTML =
                `条纹间距理论值: ${fringeSpacingMm.toFixed(3)} mm<br>
                影响因素分析:<br>
                - 光源相干性: ${coherenceText}<br>
                - 环境振动: ${vibrationText}<br>
                - 实际应用: 半导体光刻技术利用类似原理实现纳米级图案化`;
        }

        // 初始化滑块显示值
        function initializeSliderValues() {
            // 双缝间距
            document.getElementById('slit-separation-value').textContent =
                document.getElementById('slit-separation-slider').value + ' mm';

            // 缝屏距离
            document.getElementById('screen-distance-value').textContent =
                document.getElementById('screen-distance-slider').value + ' m';

            // 光波长
            document.getElementById('wavelength-value').textContent =
                document.getElementById('wavelength-slider').value + ' nm';

            // 光源单色性
            updateCoherenceValue();

            // 环境振动
            updateVibrationValue();

            // 缝宽
            document.getElementById('slit-width-value').textContent =
                document.getElementById('slit-width-slider').value + ' μm';
        }

        // 更新光源单色性显示值
        function updateCoherenceValue() {
            const value = parseFloat(document.getElementById('coherence-slider').value);
            let text;
            if (value <= 0.3) text = '差';
            else if (value <= 0.7) text = '中';
            else if (value <= 0.9) text = '良好';
            else text = '理想';

            document.getElementById('coherence-value').textContent = text;
        }

        // 更新环境振动显示值
        function updateVibrationValue() {
            const value = parseFloat(document.getElementById('vibration-slider').value);
            let text;
            if (value <= 0.3) text = '轻微';
            else if (value <= 0.7) text = '中等';
            else text = '严重';

            document.getElementById('vibration-value').textContent = text;
        }

        // 页面加载完成后初始化
        window.onload = function() {
            initializeSliderValues();
            initializeCharts();

            // 为所有滑块添加事件监听器
            const sliders = document.querySelectorAll('.slider');
            sliders.forEach(slider => {
                slider.addEventListener('input', function() {
                    // 更新滑块显示值
                    if (this.id === 'slit-separation-slider') {
                        document.getElementById('slit-separation-value').textContent = this.value + ' mm';
                    } else if (this.id === 'screen-distance-slider') {
                        document.getElementById('screen-distance-value').textContent = this.value + ' m';
                    } else if (this.id === 'wavelength-slider') {
                        document.getElementById('wavelength-value').textContent = this.value + ' nm';
                    } else if (this.id === 'coherence-slider') {
                        updateCoherenceValue();
                    } else if (this.id === 'vibration-slider') {
                        updateVibrationValue();
                    } else if (this.id === 'slit-width-slider') {
                        document.getElementById('slit-width-value').textContent = this.value + ' μm';
                    }

                    // 更新图表
                    updateInterference();
                });
            });
        };
    </script>
</body>
</html>